<template>
  <view class="order">
    <view class="box" v-for="(item, index) in orderTitle" :key="index" @click="clickBox(index)">
      <image class="image" :src="'/api/images/dish/' + item.image" mode="aspectFill"></image>
      <view class="title">
        {{item.title}}
      </view>
      <view class="total-amount">
        ￥{{item.totalAmount}}
      </view>

    </view>

    <el-drawer title="订单详情" :visible.sync="drawer" direction="btt" :before-close="handleClose">
      <view class="box-rate">
        <el-rate v-model="rate"></el-rate>
        <button type="warn" size="mini" @click="submitRate()">确认评分</button>
      </view>
      <el-table :data="tableData" style="width: 95%;">
        <el-table-column prop="name" label="菜品名">
        </el-table-column>

        <el-table-column prop="size" label="份量">
        </el-table-column>

        <el-table-column prop="price" label="单价">
        </el-table-column>

        <el-table-column prop="num" label="数量">
        </el-table-column>

      </el-table>
    </el-drawer>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        orderTitle: [{
          title: '',
          totalAmount: '',
          image: ''
        }],
        orderListDetail: [],
        drawer: false,
        tableData: [{
            name: '香辣饺子',
            size: '大份',
            price: '18.5',
            num: '3'
          },
          {
            name: '香辣饺子',
            size: '大份',
            price: '18.5',
            num: '3'
          }
        ],
        rate: 0,
        activeIndex: null
      }
    },
    onShow() {
      this.getOrderList()
    },
    methods: {
      submitRate() {
        let o = this.orderListDetail[this.activeIndex]
        console.log(o);
        // console.log(this.rate);
        uni.request({
          url: '/api/order_lists',
          method: 'PUT',
          data: {
            id: o.id,
            rate: this.rate
          },
          success: (res) => {
            if (res.data.code == 1) {
              this.$message.success('评分成功')
            } else {
              this.$message.error('评分失败')
            }
          },
          fail() {
            this.$message.error('评分失败')
          }
        })
        
        this.drawer = false
        this.rate = 0
      },
      clickBox(index) {
        this.activeIndex = index
        this.drawer = true
        let o = this.orderListDetail[index].orderDetailList
        console.log(o);

        this.tableData = o.map((item) => {
          let name = ''
          let size = ''
          let price = 0.0
          let num = 0

          name = item.dish.name
          size = item.dish.size
          price = item.dish.price
          num = item.num

          return {
            name: name,
            size: size,
            price: price,
            num: num
          }
        })
      },
      handleClose(done) {
        done()
      },
      getOrderList() {
        uni.request({
          url: '/api/order_lists',
          method: 'GET',
          data: {
            consumer_id: uni.getStorageSync('id')
          },
          success: (res) => {
            if (res.data.code == 0) {
              console.log('order.vue 读取数据库失败');
              return
            }
            this.orderListDetail = res.data.data

            // console.log(res.data.data);
            this.orderTitle = res.data.data.map((orderList) => {
              let title = ''
              let totalAmount = 0.0
              let image = ''

              orderList.orderDetailList.forEach((orderDetail) => {
                title += orderDetail.dish.name + '、'
              })

              totalAmount = orderList.totalAmount
              image = orderList.orderDetailList[0].dish.image



              return {
                title: title,
                totalAmount: totalAmount,
                image: image
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .box {
    margin: 20rpx 30rpx;
    background-color: #f6f6f6;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10rpx;

    .image {
      width: 150rpx;
      height: 150rpx;
      margin: 20rpx;
      grid-column: 1 / 2;
      grid-row: 1 / 4;
    }

    .title {
      grid-column: 2 / 7;
      grid-row: 1 / 2;

      font-size: 1.2rem;
      margin-top: 20rpx;

      // 文字超出用...表示
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .total-amount {
      grid-column: 5 / 7;
      grid-row: 2 / 3;

      font-size: 1.4rem;
      color: #fe4d46;
    }
  }
  
  .box-rate {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-left: 50rpx;
    
    button {
      
    }
  }
</style>